import TablBar from "@/components/tabl-bar"
import UploadFiles from "@/components/uploadFiles"
import { uploadFilesPropsTypes } from "@/components/uploadFiles/type"
import { tablBarPropsTypes } from "@/components/tabl-bar/type"
import React, { useEffect, useState } from "react"
import { Button, Popconfirm, Table, TablePaginationConfig, message } from "antd"
import Column from "antd/es/table/Column"
import { cloneDeep } from "lodash"
import { GetFileList, DellFile } from "@/api/uploadfiles"
import { formatFileSize, initTime } from "@/utils/index"
import "./index.scss"
interface type extends uploadFilesPropsTypes, tablBarPropsTypes {

}
interface dataSourceFace {
    name: string,
    uuid: string,
    size: number,
    suffix: string,
    createTime: string,
    key: React.Key,
    index: number
}
interface response {
    list: dataSourceFace[],
    total: number,
}
let timer: any = null
let value = ""
const FileList: React.FC<type> = () => {
    const [listData, setList] = useState<dataSourceFace[]>([])
    const [show, setShow] = useState(false)
    const [loading, setLoading] = useState(false)
    const [paginationData, setPaginationData] = useState<TablePaginationConfig>(
        {
            current: 1,
            defaultPageSize: 20,
            pageSizeOptions: [20, 40, 80, 120],
            total: 0,
            onChange: (page) => {
                paginationData.current = page
                find()
            },
            onShowSizeChange: (_, size) => {
                paginationData.defaultPageSize = size
                find()
            },
            showTotal: (t) => {
                return (
                    <div>共{t}条数据</div>
                )
            }
        }
    )
    const searchInput = (str: string) => {
        value = str
        find()
    }
    const changemodel = (v: boolean, loadList: boolean) => {
        setShow(v)
        if (loadList) {
            const p = cloneDeep(paginationData)
            p.current = 1
            setPaginationData(p)
            find()
        }
    }
    const changeModelShow = () => {
        setShow(true)
    }
    const rightConterDom = () => {
        return (
            <Button type="primary" onClick={changeModelShow}>上传文件</Button>
        )
    }
    const tableOperate = (e: dataSourceFace) => {
        return (
            <Popconfirm
                title="是否执行操作？"
                description="删除后将无法恢复！"
                onConfirm={() => dellITem(e)}
                okText="是"
                cancelText="否"
            >
                <Button danger type="text">
                    删除
                </Button>
            </Popconfirm>

        )
    }
    const find = () => {
        clearTimeout(timer)
        timer = setTimeout(async () => {
            const p = cloneDeep(paginationData)
            const params = {
                page: p.current,
                size: p.defaultPageSize,
                keywords: value,
            }
            setLoading(true)
            try {
                const res = await GetFileList<response>(params)
                if (res) {
                    const { list, total } = res
                    list.map((e, index) => {
                        e.key = e.uuid
                        e.index = index + 1
                        return e
                    })
                    setList(list)
                    p.total = total
                    setPaginationData(p)
                }
            } finally {
                setLoading(false)
            }
        }, 500);

    }
    const dellITem = (item: dataSourceFace) => {
        setLoading(true)
        DellFile({ uuids: item.uuid })
            .then(() => {
                find()
                message.success("删除成功")
            })
            .catch(() => {
                message.error("操作失败")
                setLoading(false)
            })
            .finally(() => {

            })
    }

    useEffect(() => {
        value = ""
        find()
    }, [])
    return (
        <div>
            <TablBar changeValue={searchInput} rightConter={rightConterDom} />
            <UploadFiles changeShow={changemodel} show={show} />
            <Table
                dataSource={listData}
                loading={loading}
                pagination={paginationData}
                scroll={{ y: "calc(100vh - 250px)" }}
                style={{ marginTop: "20px" }}
                size="large"
            >
                <Column title="序号" dataIndex="index" align="center" width={80} />
                <Column title="文件名称" dataIndex="name" align="center" />
                <Column title="文件id" dataIndex="uuid" align="center" />
                <Column title="文件大小" dataIndex="size" align="center" width={120} render={(e) => {
                    return (
                        <div>{formatFileSize(e)}</div>
                    )
                }} />
                <Column title="文件后缀" dataIndex="suffix" align="center" width={120} />
                <Column title="创建时间" dataIndex="createTime" align="center" render={(e) => {
                    return (
                        <div>{initTime(e)}</div>
                    )
                }} />
                <Column title="操作" align="center" render={tableOperate} />
            </Table>
        </div>
    )
}
export default FileList